<template>
  <a-modal
    :visible="visible"
    title="更换短信模板"
    @ok="handleOk"
    @cancel="cancelClick"
  >
    <a-spin :spinning="spinning">
      <a-row
        v-for="(item, index) in smsTemplateList"
        :key="item.alias"
        style="
          margin-bottom: 10px;
          cursor: pointer;
          background-color: #eeeeee;
          padding: 10px;
        "
        :style="{
          backgroundColor: textDefault == item.txt ? '#eeeeee' : '',
        }"
        @click="smsTemplateClick(item)"
      >
        <a-col :span="24" style="font-weight: 600">模板{{ index + 1 }}</a-col>
        <a-col :span="24">{{ item.txt }}</a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
import {
  computed,
  defineComponent,
  reactive,
  toRaw,
  toRefs,
  watch,
  ref,
} from "vue";
import request from "../../../../common/utils/request";

export default defineComponent({
  name: "replaceSMS",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    text: {
      type: String,
      default: "",
    },
  },
  setup(props, context) {
    const state = reactive({
      count: 0,
      smsTemplateList: [],
      textDefault: "",
      spinning: false,
    });

    const handleOk = () => {
      context.emit("successChange", state.textDefault);
    };

    const cancelClick = () => {
      context.emit("cancelChange");
    };

    const getSmsTemplateList = () => {
      state.spinning = true;
      request
        .get("/org", "/notice/smsTemplateList")
        .then((res) => {
          state.spinning = false;
          state.smsTemplateList = res.list;
        })
        .catch(() => {
          state.spinning = false;
        });
    };

    const smsTemplateClick = (data) => {
      state.textDefault = data.txt;
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          state.textDefault = props.text;
          getSmsTemplateList();
        }
      }
    );

    return {
      ...toRefs(state),
      handleOk,
      cancelClick,
      getSmsTemplateList,
      smsTemplateClick,
    };
  },
});
</script>

<style lang="scss" scoped></style>
